<template>
  <transition name="slide">
    <music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
  </transition>
</template>

<script type="text/ecmascript-6">
  import {mapGetters} from 'vuex'
  import {getSingerDetail} from 'api/singer'
  import {ERR_OK} from 'api/config'
  import {createSong} from 'common/js/song'
  import MusicList from 'components/music-list/music-list'
  export default {
    name:'SingerDetail',
    data() {
      return {
        songs: []
      }
    },
    computed: {
      title(){
        return this.singer.name
        console.log(this.singer.name);
      },
      bgImage(){
        return this.singer.avatar
          console.log(this.singer.avatar);
      },
      ...mapGetters([
        'singer'
      ])
    },
    created() {
      this._getDetail()
      console.log(this.singer.id);//通过vuex传入的数据
    },
    methods:{
      _getDetail() {//获取传入的歌手id
        //当前页面用户刷新是获取不到数据的，做个跳转
        if (!this.singer.id) {
          this.$router.push('/recommend')
          return
        } //???刷新报错 id未定义

        getSingerDetail(this.singer.id).then((res) => {
          if(res.code === ERR_OK) {
            // console.log(res.data.list);
            this.songs =this._normalizeSongs(res.data.list)
            console.log(this.songs);
          }
        })
      },//end
      //对list做处理
      _normalizeSongs(list){
        let ret = []
        list.forEach((item)=> {
          let {musicData} = item

          //调用封装好的song.js
          //歌单，排行榜都会用到musicData，避免重复写参数代码
          if(musicData.songid && musicData.albummid) {
            ret.push(createSong(musicData))
          }
        })
        return ret //记得返回数组
      }//end

    },
    components: {
      MusicList
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"


  .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
</style>
